<template>
  <div class="background">
    <a-card style="margin-bottom: 10px">
      <a-row>
        <a-col :span="24">
          <a-button
            type="primary"
            @click="add('')"
          >新增公众号菜单</a-button>
          <a-button
            type="primary"
            ghost
            style="margin-left: 10px"
            @click="toWx"
          >发布公众号菜单</a-button>
        </a-col>
      </a-row>
    </a-card>
    <a-card>

      <div style="    display: flex;
    justify-content: space-between;">
        <div
          style="width:70%"
          id="change"
        >
          <a-table
            :columns="columns"
            :loading="loading"
            :data-source="data"
            :pagination="false"
          >
            <template
              slot="status"
              slot-scope="txt, record"
            >
              <span v-if="record.menuInfo.status==1">开启</span>
              <span v-else>关闭</span>
            </template>
            <template
              slot="action"
              slot-scope="txt, record"
            >

              <a
                class="mr-10"
                @click="add(record.menuInfo)"
              >
                <a-icon type="edit" />编辑
              </a>
              <a
                class="mr-10"
                @click="deleteRecord(record)"
              >
                <a-icon type="delete" />删除
              </a>
            </template>
            <a-table
              slot="expandedRowRender"
              slot-scope="text"
              :showHeader="false"
              id="childTable"
              :columns="innerColumns"
              :data-source="text.childrenMenu"
              :pagination="false"
            >
              <template
                slot="status"
                slot-scope="txt, record"
              >
                <span v-if="record.status==1">开启</span>
                <span v-else>关闭</span>
              </template>
              <template
                slot="action"
                slot-scope="txt, record"
              >

                <a
                  class="mr-10"
                  @click="add(record)"
                >
                  <a-icon type="edit" />编辑
                </a>
                <a
                  class="mr-10"
                  @click="deleteRecord(record)"
                >
                  <a-icon type="delete" />删除
                </a>
              </template>
            </a-table>

          </a-table>
        </div>
        <div style="width:30%">
          <div class="box">
            <div class="top">
              <a-icon type="left" />
              {{menuName}}
              <a-icon type="user" />
            </div>
            <div class="content">
              <div class="icon">{{menuName}}</div>
              <div class="photo">
                <div>
                  <p style="font-size: 12px;color: #969799;margin-bottom: 5px;">{{menuName}}官方商城</p>
                  <p style="margin-bottom: 5px;">欢迎关注{{menuName}}，点击领卡</p>
                  <div class="img">{{menuName}}</div>
                </div>

                <p style="margin-bottom: -5px;padding-top:10px;font-size: 12px;">小程序</p>
              </div>
            </div>
            <div class="bottom">
              <a-icon
                style="margin: 12px;"
                type="appstore"
              />
              <div
                v-for="(item,index) in data"
                :key="index"
                class="item"
                :style="{width: `${100/data.length}%`}"
              >
                <a-popover
                  placement="top"
                  v-if="item.childrenMenu.length"
                >
                  <template slot="content">
                    <div
                      v-for="(subitem,index) in item.childrenMenu"
                      :key="index"
                      style="border-bottom: 1px solid #969799;height:40px;line-height:40px"
                    >
                      <p v-if="subitem.status==1">{{subitem.menuName}}</p>
                    </div>
                  </template>
                  <a-button style="background: transparent;border:none">{{item.menuInfo.menuName}}</a-button>
                </a-popover>
                <a-button
                  v-else
                  style="background: transparent;border:none"
                >{{item.menuInfo.menuName}}</a-button>
              </div>
            </div>
          </div>
        </div>
      </div>

    </a-card>
    <create
      v-if="showAdd"
      :account="account"
      :appid="appid"
      @close="close"
    ></create>
  </div>
</template>

<script>
import { postAction, getAction } from '@/api/manage'
import create from './create.vue'
const columns = [
  {
    title: '菜单名称',
    width: 200,
    dataIndex: 'menuInfo.menuName'
    
  },
  {
    title: '菜单排序',
    dataIndex: 'menuInfo.sorted',
    width: 150
  },
  {
    title: '类型',
    dataIndex: 'menuInfo.typeName',
    width: 120

  },
  {
    title: '数据',
    dataIndex: 'menuInfo.businessInfo',
    width: 350
  },
  {
    title: '状态',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    width: 140,
    scopedSlots: { customRender: 'action' }
  }
]
const innerColumns = [
  {
    title: '二级菜单名称',
    dataIndex: 'menuName',
    width: 200
  },
  {
    title: '排序',
    dataIndex: 'sorted',
    width: 150
  },
  {
    title: '类型',
    dataIndex: 'typeName',
    width: 120
  },
 
  {
    title: '数据',
    dataIndex: 'businessInfo',
    width: 350
  },
   {
    title: '状态',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    width: 140,
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  components: {
    create
  },
  props: {
    appid: {
      type: String,
      default: null
    },
    menuName: {
      type: String,
      default: null
    }
  },

  data() {
    return {
      columns,
      innerColumns,
      urlKey: 'basemgt-wx/WxMenuInfo',
      data: [],
      menuList: [],
      loading: false,
      showAdd: false,
      dataSource: []
    }
  },
  mounted() {
    this.loadData()
  },
  watch: {
    appid(newvalue) {
      console.log(newvalue)
      this.loadData()
    }
  },
  methods: {
    handleTableChange(pagination) {
      this.pagination = pagination
      this.loadData()
    },
    close() {
      this.showAdd = false
      this.loadData()
    },
    add(record) {
      this.showAdd = true
      this.account = record
    },
    loadData() {
      this.loading = true
      const params = {
        appid: this.appid
      }
      try {
        postAction(`${this.urlKey}/findMenuByCondition`, params).then(data => {
          if (data.code == 200) {
            this.data = data.data
            this.dataSource = data.data[0].childrenMenu
          } else {
            this.$message.warning(data.msg || data.message)
          }
        })
      } catch (error) {
        this.$message.warning('获取列表失败')
      } finally {
        this.loading = false
      }
    },
    deleteRecord(record) {
      this.$confirm({
        content: '确定要删除吗？',
        onOk: () => {
          const params = {
            id: record.id
          }
          getAction(`${this.urlKey}/deleteMenu`, params).then(data => {
            if (data.code == 200) {
              this.$message.success('删除成功')
              this.loadData()
            } else {
              this.$message.warning(data.msg || data.message)
            }
          })
        },
        onCancel() {}
      })
    },
    toWx() {
      this.$confirm({
        content: '确定要同步微信吗？',
        onOk: () => {
          const params = {
            appid: this.appid
          }
          getAction(`${this.urlKey}/menuSyncWx`, params).then(data => {
            if (data.code == 200) {
              this.$message.success('同步成功')
              this.loadData()
            } else {
              this.$message.warning(data.msg || data.message)
            }
          })
        },
        onCancel() {}
      })
    }
  }
}
</script>
<style lang="less" scoped>
.background {
  background: transparent;
}
.ant-modal-body {
  display: flex;
  justify-content: space-between;
}
.box {
  width: 350px;
  height: 600px;
  border-radius: 10px;
  margin: auto;
  overflow: hidden;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  .top {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #dcdfe6;
  }
  .content {
    display: flex;
    margin-top: 20px;
    padding: 10px;
    height: 350px;
    .icon {
      width: 50px;
      height: 50px;
      border-radius: 5px;
      line-height: 50px;
      font-size: 12px;
      text-align: center;
      background: black;
      color: #fff;
    }
    .photo {
      margin-left: 10px;
      width: 200px;
      padding: 10px;
      border: 1px solid #dcdfe6;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .img {
        width: 100%;
        height: 180px;
        border-radius: 5px;
        line-height: 180px;
        font-size: 12px;
        text-align: center;
        background: black;
        color: #fff;
      }
    }
  }
  .bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 152px;
    background: #d9d9d9;
    height: 36px;
    line-height: 36px;
    .item {
      border-top: 1px solid #dcdfe6;
      text-align: center;
      border: 1px solid #bfbfbf;
    }
  }
}
</style>
<style>
#change .ant-table {
  font-size: 15px !important;
}
#childTable .ant-table {
  font-size: 13px !important;
}
</style>
